﻿<!DOCTYPE html>
<!--设置排查标准-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>

    <link href="../static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="../static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
</head>

<body style="overflow-x:hidden;">
    <div id="app" v-cloak class="popupW50">
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">
            <el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.project" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Project+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="elst-select-mini vue-treeselect_style">
                        <el-form-item prop="PlanUser">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskContent.Participant+mark.m}}
                                </template>
                                <treeselect v-model="Form.regions" :options="AreaList"
                                            slot="suffix"
                                            multiple="true"
                                            flat="true"
                                            show-count="true"
                                            style="line-height: 14px;"
                                            placeholder="请选择" />


                            </el-input>

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.RiskContent.Remark+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.remark"
                                          autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="head-tool">
                    <el-button type="primary" @click="openSetStandard">{{'选择排查标准'}}</el-button>
                </el-col>
            </el-row>
            <!--table-->
            <el-table stripe ref="table" :data="Form.Standard" :height="ListItem.tableHeight" border v-if="showTable"
                      @selection-change="handleSelectionChange" row-style="height:10px" style="width: 100%">
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column type="index" :label="RisksManagement.EquipmentFacilities.id" align="center"
                                 :index="indexMethod" width="50" show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="typeText" show-overflow-tooltip="true" align="center"
                                 min-width="120" :label="'类型'">
                </el-table-column>
                <el-table-column prop="investigationProject" show-overflow-tooltip="true" min-width="150" align="center"
                                 :label="'排查项目'">
                </el-table-column>
                <el-table-column prop="investigationContents" show-overflow-tooltip="true" min-width="150" align="center"
                                 :label="'排查内容与排查标准'">
                </el-table-column>
                <el-table-column prop="riskLevelText" show-overflow-tooltip="true" align="center"
                                 min-width="90" :label="RisksManagement.EquipmentFacilities.RiskLevel">
                </el-table-column>
                <el-table-column width="80" prop="update" :label="'操作'" fixed="right" align="center">
                    <template slot-scope="scope">
                        <button type="button" class="elst-bt-xg" @click=removeRow(scope.row.screeningPlanProDetailId)>
                            <i class="el-icon-delete"></i>
                        </button>
                    </template>
                </el-table-column>
            </el-table>
            <!--table-->
            <el-row type="flex" justify="end" style="float:right;width:100%;">
                <el-form-item>
                    <br>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                    <br>
                    <br>
                </el-form-item>
            </el-row>

        </el-form>
        <el-dialog title="选择排查标准" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%" height="80%" fullscreen="true"
                   top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">
        Vue.component('treeselect', VueTreeselect.Treeselect)
        app = new Vue({
            el: '#app',
            data: {
                //父页传参
                id: '',
                ListItem: ListItem,
                showTable: false,
                AreaList: [],
                AllAreaList: [],
                //业务表单内容
                Form: {
                    id: '',
                    project: '',
                    regions: [],
                    remark: '',
                    Standard: [],
                },
                //表单验证
                rules: {

                },
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //移除
                removeRow: function (id) {
                    var temp = [];
                    var Standard = this.Form.Standard;
                    for (var i = 0; i < Standard.length; i++) {
                        temp.push(Standard[i]);
                    }
                    for (var i = temp.length - 1; i >= 0; i--) {
                        if (id == temp[i].screeningPlanProDetailId) {
                            Standard.splice(i, 1);
                        }
                    }
                },
                //表格序号连续化
                indexMethod: function (index) { return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1; },
                //Dialog展示
                openSetStandard: function (val, id) {
                    this.ListItem.InputUrl = "RiskContentSetBasicStandard.html?t=" + Date.parse(new Date());
                    this.ListItem.dialogVisible = true;
                },
                closeDialog: function () {
                    if (this.Form.Standard.length) this.showTable = true
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    mythis.Form.pid = mythis.pid;
                    mythis.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            var parentForm = parent.app.Form;
                            var myList = mythis.Form.Standard;
                            var myAreaList = mythis.Form.regions;
                            //console.log('A', parentForm.yH_ProjectAndDetail);
                            //console.log('B', myList)
                            //// return false;

                            //显示用

                            for (var o = 0; o < myAreaList.length; o++) {

                                var projectTempId = newGuid();


                                var project = {};
                                var detailList = [];

                                for (var j = mythis.Form.Standard.length - 1; j >= 0; j--) {

                                    var detailGuid = newGuid();

                                    var v = mythis.Form.Standard[j];
                                    var temp = {};
                                    for (var key in v) {
                                        temp[key] = v[key];
                                    }
                                    temp.region = myAreaList[o];
                                    temp.areaName = mythis.GetAreaName(myAreaList[o]);
                                    temp.project = mythis.Form.project;
                                    temp.remark = mythis.Form.remark;
                                    temp.screeningPlanProjectId = projectTempId;
                                    temp.standardContent = v.investigationContents;
                                    temp.screeningPlanProDetailId = detailGuid;
                                    if (!parentForm.yH_ProjectAndDetail) parentForm.yH_ProjectAndDetail = [];
                                    parentForm.yH_ProjectAndDetail.unshift(temp);





                                    var v = mythis.Form.Standard[j];
                                    var detail = {
                                        type: v.type,
                                        region: myAreaList[o],
                                        standardContent: v.investigationContents,
                                        riskLevel: v.riskLevel,
                                        standardID: v.standardID,
                                        searchMajorCode: v.searchMajorCode,
                                        screeningPlanProDetailId: detailGuid
                                    }
                                    detailList.push(detail);

                                }

                                var project = {
                                    project: mythis.Form.project,
                                    remark: mythis.Form.remark,
                                    yH_ScreeningPlanProDetail: detailList
                                }
                                if (!parentForm.yH_ScreeningPlanProject) parentForm.yH_ScreeningPlanProject = [];
                                parentForm.yH_ScreeningPlanProject.push(project);

                            }



                            parent.app.ListItem.dialogVisible = false;

                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                GetAreaList: function (type) {
                    var mythis = this;
                    myAjax("post", this, '/api/SysArea/GetListSub', { model: { Name: '', Code: '', SubFactory: null }, offset: 0, limit: 999 }
                        , function (response) {
                            console.log('1', response.data.pageData);
                            mythis.AllAreaList = response.data.pageData;
                            mythis.AreaList = menuHelperX(response.data.pageData, guidEmpty);
                        },
                        false);
                },
                GetAreaName: function (id) {
                    var AllAreaList = this.AllAreaList;
                    for (var i = 0; i < AllAreaList.length; i++) {
                        if (AllAreaList[i].id == id) {
                            return AllAreaList[i].name;
                        }
                    }
                    return id;
                }
            },
            mounted: function () {

                this.GetAreaList();
                console.log(this.AreaList)
                if (this.Form.Standard.length) this.showTable = true
                //列表高度自适应
                tablehigh(this);
            }
        });
        //下拉树数据格式化
        function menuHelperX(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelperX(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>

</body>

</html>